<template>
  <div class="my-collections">
    <hm-header>
      <template #center>
        <div>我的收藏</div>
      </template>
    </hm-header>
    <!-- 文章内容主体 -->
    <div v-if="myColList.length" class="article-content">
      <!-- 下拉刷新 -->
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 上拉加载更多 -->
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <!-- 文章item -->
              <hm-post-item v-for="artItem in myColList"
                            :key="artItem.id"
                            :artItem="artItem">
              </hm-post-item>
            </van-list>
          </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import HmPostItem from 'components/hm-post-item.vue'

export default {
  data () {
    return {
      myColList: [],
      refreshing: false,
      loading: false,
      finished: false,
      pageIndex: 1,
      pageSize: 500
    }
  },

  components: {
    HmPostItem
  },

  created () {
    this.getMyColList()
  },

  methods: {
    /**
     * 网络请求相关
     */
    async getMyColList () {
      const { data: res } = await this.$axios.get('/user_star', {
        params: {
          pageIndex: this.pageIndex + 1,
          pageSize: this.pageSize
        }
      })
      const { data, message, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail(message)
      }
      if (data.length < this.pageSize) {
        this.finished = true
      }
      console.log(data)
      data.forEach(v => {
        v.comment_length = v.comments.length
      })

      this.myColList = [...this.myColList || [], ...data]
      this.pageIndex++
    },
    // 下拉刷新
    async onRefresh () {
      this.pageIndex = 0
      this.myColList = []
      await this.getMyColList()
      this.$toast('刷新成功')
      this.refreshing = false
    },

    async onLoad () {
      await this.getMyColList()
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
